<template>
  <el-form ref="formRef" :model="aForm" :rules="aRules" :label-position="labelPosition">
    <el-form-item
      :label="$t('AbpAccount[\'DisplayName:CurrentPassword\']')"
      prop="password"
    >
      <el-input v-model.trim="aForm.password" type="password" />
    </el-form-item>
    <el-form-item
      :label="$t('AbpAccount[\'DisplayName:NewPassword\']')"
      prop="newPassword"
    >
      <el-input v-model.trim="aForm.newPassword" type="password" />
    </el-form-item>
    <el-form-item
      :label="$t('AbpAccount[\'DisplayName:NewPasswordConfirm\']')"
      prop="againPassword"
    >
      <el-input v-model.trim="aForm.againPassword" type="password" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit(formRef)">{{
        $t("AbpAccount['Submit']")
      }}</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import { ChangePwd } from "@/api/identity/user/types";
import { updateUserPassword } from "@/api/identity/user/index";
import type { FormInstance, FormRules } from "element-plus";
import { translateRouteTitleI18n, getI18N } from "@/utils/i18n";
import i18n from "@/lang/index";
// import { ElNotification } from "element-plus";
const changePwd = ref<ChangePwd>({
  currentPassword: "",
  newPassword: "",
});

const loading = ref(false);
const labelPosition = ref<"top" | "right" | "left">("top");

function avalidatePass(rule: any, value: string, callback: any) {
  if (value === "") {
    callback(new Error(getI18N("AbpAccount['ThisFieldIsNotValid.']")));
  } else if (value !== aForm.value.newPassword) {
    callback(
      new Error(
        i18n.global.t("AbpIdentity['{0} and {1} do not match.']", [
          i18n.global.t("AbpAccount['DisplayName:NewPassword']"),
          i18n.global.t("AbpAccount['DisplayName:NewPasswordConfirm']"),
        ])
      )
    );
  } else {
    callback();
  }
}
const aForm = ref<any>({});
const formRef = ref<FormInstance>();

const aRules = reactive<FormRules>({
  password: [
    {
      required: true,
      message: translateRouteTitleI18n("AbpAccount['ThisFieldIsRequired.']"),
      trigger: ["blur", "change"],
    },
  ],
  newPassword: [
    {
      required: true,
      message: translateRouteTitleI18n("AbpAccount['ThisFieldIsRequired.']"),
      trigger: ["blur", "change"],
    },
  ],
  againPassword: [
    {
      required: true,
      message: translateRouteTitleI18n("AbpAccount['ThisFieldIsRequired.']"),
      validator: avalidatePass,
      trigger: ["blur", "change"],
    },
  ],
});

async function submit(formEl: FormInstance | undefined) {
  if (!formEl) return;
  // console.log("formEl", formEl);
  formEl.validate((valid) => {
    if (valid) {
      loading.value = true;
      const changePwdParam: ChangePwd = {
        currentPassword: aForm.value.password,
        newPassword: aForm.value.newPassword,
      };
      console.log('changePwdParam',changePwdParam)
      updateUserPassword(changePwdParam)
        .then((res) => {
          console.log('res',res)
          loading.value = false;
          ElNotification({
            title: i18n.global.t("actionTiP.title"),
            message: i18n.global.t("actionTiP.update"),
            type: "success",
            duration: 2000,
          });
        })
        .catch(() => {
          loading.value = false;
        });
    }
  });
}
onMounted(() => {
 // console.log("passwordchange");
});
</script>
